<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Source+Code+Pro&display=swap"
    rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
</head>
<style>
  html,
  body {
    height: 100%;
  }

  body {
    margin: 0;
    background: #000000;
    display: grid;
    place-items: center;
  }

  .wrapper {
    text-align: center;
    width: 230px;
  }

  .search {
    display: inline-flex;
    padding: 5px;
    border-radius: 50px;
    transition: 0.4s;
  }

  .search:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  .search:hover input {
    max-width: 180px;
  }

  .search input {
    background: transparent;
    border: 0;
    max-width: 0;
    padding: 0;
    text-indent: 12px;
    color: #f9f9f9;
    font-size: 22px;
    font-family: "Poppins";
    outline: none;
    transition: 0.4s;
  }

  .search input::placeholder {
    color: rgba(255, 255, 255, 0.375);
  }

  .search span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    background: #8f44fd;
    color: #f9f9f9;
    border-radius: inherit;
    font-size: 24px;
    pointer-events: none;
  }
</style>

<body>


  <div class="wrapper">
    <div class="search">
      <span class="uil uil-search">
      </span>
      <input placeholder="Search" type="text" />
    </div>
  </div>
</body>

</html>